<template>
	<view class="FAQ">
		<u-navbar
			back-text=" "
			:background="{
				background: '#2e5882'
			}"
			:border-bottom="false"
		></u-navbar>
		<view class="bg u-flex u-row-between u-col-center">
			<text style="color: #FFFB8F;">新人必看</text>
			<text>十问十答</text>
		</view>
		<view class="FAQlist">
			<block class="" v-for="(v, k) in FAQlist" :key="k">
				<view class="FAQli">
					<view class="header u-flex u-row-left u-col-top">
						<view class="widget">Q</view>
						<view class="text" style="font-size: 26rpx;text-align: left;">{{ v.title }}</view>
					</view>
					<u-line color="rgba(0, 0, 0, 0.08)" margin="14rpx 0"></u-line>
					<view class="conent u-flex u-row-left u-col-top">
						<view class="widget">A</view>
						<view class="text" style="text-align: left;">{{ v.problem }}</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	name: 'FAQ',
	data() {
		return {
			page: 1,
			FAQlist: [
				// {
				// 	title: 'CESH',
				// 	problem: 'ANWER'
				// }
			]
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		this.getTenProblem();
	},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		getTenProblem() {
			this.$u.api
				.getTenProblem({
					page: this.page,
					pagesize: 20
				})
				.then(res => {
					console.log(res);
					this.FAQlist = res.data.data;
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.FAQ {
	.bg {
		background-color: #2e5882;
		width: 100%;
		height: 150rpx;
		font-size: 72rpx;
		font-weight: 600;
		padding: 26rpx 60rpx 94rpx 60rpx;
		color: #ffffff;
		// position: fixed;
	}
	.FAQlist {
		background-color: rgba(248, 248, 249, 0.86);
		border-radius: 40rpx 40rpx 0 0;
		padding: 20rpx;
		margin-top: -34rpx;
		.FAQli {
			background-color: #ffffff;
			box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.08);
			text-align: center;
			font-size: 28rpx;
			border: 2rpx solid rgba(187, 187, 187, 0.25);
			padding: 24rpx;
			border-radius: 12rpx;
			margin-bottom: 24rpx;
			.widget {
				width: 48rpx;
				height: 48rpx;
				background-color: rgba(245, 34, 45, 0.15);
				border-color: rgba(245, 34, 45, 0.43);
				border-width: 2rpx;
				border-style: solid;
				color: rgba(245, 34, 45, 0.43);
				font-size: 28rpx;
				text-align: center;
				line-height: 40rpx;
				border-radius: 100rpx;
				margin-right: 26rpx;
			}
			.header {
				.text {
					width: 590rpx;
					color: #101010;
					font-size: 28rpx;
					font-weight: 600;
				}
			}
			.conent {
				.widget {
					background-color: rgba(73, 138, 202, 0.26);
					border-color: rgb(73, 138, 202);
					border-width: 2rpx;
					border-style: solid;
					color: rgb(73, 138, 202);
				}
				.text {
					width: 590rpx;
					color: #101010;
					font-size: 28rpx;
					font-weight: 600;
					text-align: left;
				}
			}
		}
	}
}
</style>
